<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>视频列表</title>
        <style>
            *{margin: 0;padding:0;box-sizing: border-box}
            .container{
                width: 1200px;
                margin: 50px auto;
            }

            .item{
                width: 20%;
                float: left;
                padding: 0 20px 20px;
                height: 228px;
            }

            hr{
                margin: 20px 0;
            }

            .hot-list{
                margin: 0 -20px;
            }

            .title{
                font-size: 14px;
                padding: 5px 0;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .up{
                font-size: 12px;
            }

            .live-icon{
                font-size: 12px;
                border:solid 1px rgb(255, 102, 153);
                color: rgb(255, 102, 153);
                padding: 2px;
                border-radius: 3px;
                display:inline-block;
                margin-right: 5px;
            }
        </style>
    </head>

    <body>
        <div id="root"></div>

        <script src="../js/react.development.js"></script>
        <script src="../js/react-dom.development.js"></script>
        <script src="../js/babel.min.js"></script>

        <script type="text/babel">
            //外部数据   以后会通过 AJAX 请求获得
            let hotVideos = [
                
                {
                    title: "中文版BeautyBox视频磨皮美颜插件",
                    author: "爱生活的乐先生",
                    img: "https://picsum.photos/400/300?image=12",
                    isLive: true
                },
                {
                    title: "中国妖怪历史发展与远渡东瀛",
                    author: "一刻talks",
                    img: "https://picsum.photos/400/300?image=13",
                },
                {
                    title: "探索城市中可以让你休闲娱乐一整天小鹏展厅",
                    author: "R视觉",
                    img: "https://picsum.photos/400/300?image=14",
                },
                {
                    title: "指尖轻触，幻化百变桌面互动投影装置",
                    author: "数艺网",
                    img: "https://picsum.photos/400/300?image=15",
                },
                {
                    title: "全球首创， IV重型火箭在佛罗里发射启动",
                    author: "数艺网",
                    img: "https://picsum.photos/400/300?image=16",
                },
                {
                    title: "夏天的风 森林篇  #Kobe24#",
                    author: "金梓江",
                    img: "https://picsum.photos/400/300?image=17",
                },
                {
                    title: "夏天的风 都市篇 #BOSTON 11#",
                    author: "金梓江",
                    img: "https://picsum.photos/400/300?image=18",
                },
                {
                    title: "来自意大利海岸的柠檬香气",
                    author: "Fabrique",
                    img: "https://picsum.photos/400/300?image=19",
                },
                {
                    title: "穿上南半球服装的里程碑",
                    author: "Fabrique",
                    img: "https://picsum.photos/400/300?image=20",
                },
                {
                    title: "什么时装朋克又优雅？",
                    author: "Fabrique",
                    img: "https://picsum.photos/400/300?image=21",
                },
                {
                    title: "捷尼赛思G80/GV80优雅的完美主义者",
                    author: "极车制造",
                    img: "https://picsum.photos/400/300?image=22",
                },
                {
                    title: "河道里捡块和田玉 能否卖出100w人民币",
                    author: "萝卜报告",
                    img: "https://picsum.photos/400/300?image=23",
                },
                {
                    title: "导演手记——“名角”们大都有相似之处",
                    author: "汤圆视频",
                    img: "https://picsum.photos/400/300?image=24",
                },
                {
                    title: "【IWC万国绿飞计】限量礼盒版开箱作业",
                    author: "野生11",
                    img: "https://picsum.photos/400/300?image=25",
                },
                {
                    title: "小心这些症状，抑郁症可能已经在逼近",
                    author: " Psych2Go",
                    img: "https://picsum.photos/400/300?image=26",
                },
                {
                    title: "“情侣冷战”用英文怎么说？",
                    author: "Tommy美语",
                    img: "https://picsum.photos/400/300?image=27",
                },
                {
                    title: "主播真会玩主机篇番外篇",
                    author: "起小点是大腿",
                    img: "https://picsum.photos/400/300?image=28",
                },
                {
                    title: "保持专注：11个心理提示",
                    author: " Psych2Go",
                    img: "https://picsum.photos/400/300?image=29",
                },
                {
                    title: "我们唯一的家园，地球",
                    author: " Pick Up Limes",
                    img: "https://picsum.photos/400/300?image=30",
                },
                {
                    title: "与人交流，也需要技巧",
                    author: "BRAINY DOSE ",
                    img: "https://picsum.photos/400/300?image=31",
                },
            ];
                
            //推广视频
            let TVideos = [
                {
                    title: "创维也有汽车啦？静静体验创维EV6",
                    author: "车若初见",
                    img: "https://picsum.photos/400/300?image=10",
                },
                {
                    title: "《俄罗斯边疆行》第一集：莫斯科战争与和平",
                    author: "萨马尔罕",
                    img: "https://picsum.photos/400/300?image=11",
                },
                {
                    title: "家庭风味自制甜点，奥利奥芝士蛋糕",
                    author: "Cooking Tree",
                    img: "https://picsum.photos/400/300?image=32",
                },
                {
                    title: "2 分钟 get 小技巧：用 PPT 整理笔记",
                    author: "Mariana's study corner",
                    img: "https://picsum.photos/400/300?image=33",
                },
                {
                    title: "你会因为被当作局外人而产生焦虑吗？",
                    author: "TEDx",
                    img: "https://picsum.photos/400/300?image=34",
                },
                {
                    title: "Dorothy Cross：我的灵感来自于自然",
                    author: "Tate",
                    img: "https://picsum.photos/400/300?image=35",
                },
                {
                    title: "仓鼠酒店，太高级了",
                    author: "SIMI TV",
                    img: "https://picsum.photos/400/300?image=36",
                },
                {
                    title: "巧克力大理石方块面包教程，「真香」警告！",
                    author: "Cooking Tree",
                    img: "https://picsum.photos/400/300?image=37",
                },
                {
                    title: "抹茶芝士蛋糕，双层双倍快乐！",
                    author: "Cooking Tree",
                    img: "https://picsum.photos/400/300?image=38",
                },
                {
                    title: "糖果色圣诞树，香甜的马卡龙",
                    author: "Cooking Tree",
                    img: "https://picsum.photos/400/300?image=39",
                },
            ]
                
            //声明一个组件
            class VideoItem extends React.Component{
                render(){
                    //提取组件的标签属性
                    let {title, author, img, isLive} = this.props;

                    return <div className="item">
                                <img width="100%" src={img} alt="" />
                                <p className="title">
                                    {isLive && <span className="live-icon">直播中</span>}
                                    {title}
                                </p>
                                <p className="up">{author}</p>
                            </div>
                }
            }

            //
            class App extends React.Component{
                render(){
                    return <div className='container'>
                            <h2>热门视频</h2>
                            <hr />
                            <div className="hot-list">
                                {
                                    hotVideos.map((item, index) => {
                                        return <VideoItem  key={index} {...item} />
                                    })
                                }
                            </div>
                            <h2>推广视频</h2>
                            <hr />
                            <div className="hot-list">
                                {
                                    TVideos.map((item, index) => {
                                        return <VideoItem key={index} {...item} />
                                    })
                                }
                            </div>
                        </div>
                }
            }

            //渲染
            ReactDOM.render(<App />, document.querySelector("#root"));
        </script>
    </body>
</html>
